<template>
    <el-dialog :model-value="modelValue" @update:model-value="changeModelValue" draggable :title="title" width="650px"
        :close-on-click-modal="false" @close="resetFields">
        <el-form ref="formInstance" :disabled="isDetail" :model="form" :rules="rules" label-width="auto">
            <el-form-item label="收货单位" prop="company">
                <el-input v-model="form.company" maxlength="50" show-word-limit style="width: 100%" placeholder="请输入收货单位"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="companyAddress">
                <el-input v-model="form.companyAddress" maxlength="50" show-word-limit style="width: 100%" placeholder="请输入收货地址"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名" prop="companyName">
                <el-input v-model="form.companyName" maxlength="30" show-word-limit style="width: 100%" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话" prop="companyPhone">
                <el-input v-model="form.companyPhone" maxlength="30" show-word-limit style="width: 100%" placeholder="请输入联系人电话"></el-input>
            </el-form-item>

            <el-form-item label="发货人" prop="person">
                <el-input v-model="form.person" maxlength="30" show-word-limit style="width: 100%" placeholder="请输入发货人"></el-input>
            </el-form-item>

            <el-form-item label="创建时间" prop="createTime">
                <el-date-picker v-model="form.createTime" type="datetime" style="width: 100%"></el-date-picker>
            </el-form-item>
            
        </el-form>
        <template #footer>
            <div v-if="!isDetail" class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button :loading="loading" :icon="Finished" type="primary" @click="save">导出</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref, onMounted, watch, nextTick } from 'vue';
import { Finished } from '@element-plus/icons-vue';
import { exportFile } from '@/server/out';
import { ElMessage } from 'element-plus';

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
    modelValue: {
        type: Boolean,
        default: false,
    },
    isDetail: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits(['close', 'reload', 'update:modelValue']);

const title = computed(() => {
    return "导出收货单"
});

const form = ref({});
const typeFlag = ref(false);
const loading = ref(false);
const formInstance = ref();

const rules = ref({
    company: [{ required: true, message: '请输入收货单位', trigger: 'blur' }],
    companyAddress: [{ required: true, message: '请输入收货地址', trigger: 'blur' }],
    companyName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
    companyPhone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
    person: [{ required: true, message: '请输入发货人', trigger: 'blur' }],
    createTime: [{ required: true, message: '请选择创建时间', trigger: 'blur' }],
});

watch(
    () => props.modelValue,
    v => {
        if (v) {
            form.value = JSON.parse(JSON.stringify(props.info));
        }
    },
);

function goBack() {
    emits('close');
}

function changeModelValue(v) {
    emits('update:modelValue', v);
}

function closeDialog() {
    changeModelValue(false);
}

async function save() {
    const callback = exportFile;
    formInstance.value.validate(async vaild => {
        if (vaild) {
            loading.value = true;
            const shopList = form.value.shopList.map(i => i.id)
            const data = { ...form.value, data: shopList };
            try {
                const res = await callback(data);
                console.log(res, '导出收货单');
                const blob = res.data;
                const url = window.URL.createObjectURL(new Blob([blob]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', `收货单_${form.value.company}.xlsx`); // 设置下载的文件名
                // document.body.appendChild(link);
                link.click();
                if (res.code == 1) {
                    ElMessage.success('操作成功');
                    emits('reload');
                    emits('close');
                }
            } catch (error) {
            } finally {
                loading.value = false;
            }
        } else {
            return false;
        }
    });
}

function openType() {
    typeFlag.value = true;
}

function confirmType(val) {
    console.log(val, 'callback');
    const { name, id } = val;
    form.value.typeName = name;
    form.value.typeId = id;
}

/**重置表单校验 */
function resetFields() {
    formInstance.value.resetFields();
}

onMounted(() => {
    if (props.info.id) {
        form.value = JSON.parse(JSON.stringify(props.info));
    }
});
</script>

<style lang="scss" scoped>
.edit {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: #212121;
    border-radius: 5px;
    padding: 20px;
}

::v-deep(.el-input.is-disabled .el-input__inner) {
    color: #ff5722 !important; // 修改为你想要的颜色，例如橙色
}
</style>